<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>驾校管理新增</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="css/layuiAdmin.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <script src="../../static/js/avalon.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->
</head>

<body>

    <div class="layui-card xyxx" ms-controller="test">
        <div class="layui-card-header">驾校管理新增</div>
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label">省份：</label>
                        <div class="layui-input-block">
                            <select name="provinceId" id='provinceId' ms-duplex="@selected_1" lay-verify="required" lay-filter="provinceSelect">
                                <option value="">请选择</option>
                                <option ms-attr="{value: el.code}" ms-for="($index, el) in @provlist">{{el.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label">市辖：</label>
                        <div class="layui-input-block">
                            <select name="cityId" id='cityId' :duplex="@selected_2" lay-verify="required" lay-filter="regionSelect">
                                <option value="">请选择</option>
                                <option ms-attr="{value: el.code}" ms-for="($index, el) in @regionlist">{{el.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label">区县：</label>
                        <div class="layui-input-block">
                            <select name="areaId" id="areaId" :duplex="@selected_3" lay-verify="required">
                                <option value="">请选择</option>
                                <option ms-attr="{value: el.code}" ms-for="($index, el) in @arealist">{{el.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label">所属管辖：</label>
                        <div class="layui-input-block">
                            <select name="divisionId" :duplex="@selected_4" lay-verify="required">
                                <option value="">请选择</option>
                                <option ms-attr="{value: el.id}" ms-for="($index, el) in @infolist">{{el.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label" :click="changetype(1)">类型 {{type}} </label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" lay-filter="component-form-type" ms-duplex="@type" value="1" title="总校">
                        <input type="radio" name="type" lay-filter="component-form-type" ms-duplex="@type" value="2" title="非直营总校">
                        <input type="radio" name="type" lay-filter="component-form-type" ms-duplex="@type" value="3" title="分校">
                        <input type="radio" name="type" lay-filter="component-form-type" ms-duplex="@type" value="4" title="报名点">
                    </div>

                </div>
                <h5 class="lheight" :if="@readonlys">上级机构：</h5>
                <div class="layui-row layui-col-space10" :if="@readonlys">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">总校：</label>
                        <div class="layui-input-block">
                            <select name="parentId" :duplex="@parentid" lay-verify="required" id="branchId" lay-filter="branchIdSelect">
                                <option value="">请选择</option>
                                <option ms-attr="{value: el.id}" ms-for="($index, el) in @gathertlist">{{el.name}}</option>

                            </select>
                        </div>
                    </div>
                    <div class="layui-inline  layui-col-sm6" :if="@branch">
                        <label class="layui-form-label">分校：</label>
                        <div class="layui-input-block">
                            <select name="parentId" :duplex="@branchid" lay-filter="branchIdSelect1">
                                <option value="">请选择</option>
                                <option ms-attr="{value: el.id}" ms-for="($index, el) in @branchlist">{{el.name}}</option>

                            </select>
                        </div>
                    </div>
                </div>


                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">总校代码：</label>
                        <div class="layui-input-block">
                            <input lay-verify="required|number" :attr="{readonly: @readonlys}" ms-duplex="@CodeName.code" maxlength="20" type="text"
                                name="code" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <h6 class="pleft17">
                            <span class="red">*</span>驾校代码唯一，只能输入数字，10字符内</h6>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">总校名称：</label>
                        <div class="layui-input-block">
                            <input name="name" type="text" :attr="{readonly: @readonlys}" ms-duplex="@CodeName.name" lay-verify="required" maxlength="20"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <h6 class="pleft17">
                            <span class="red">*</span>驾校名称唯一，可输入汉字+字母+数字，50字符内</h6>
                    </div>
                </div>

                <div class="layui-row layui-col-space10" :if="@readonlys">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">分校或报名点名称：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="branchName" :duplex="@branchname">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <h6 class="pleft17">若上级机构，总校没有则不显示此栏。</h6>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">驾校地址：</label>
                        <div class="layui-input-block">
                            <input type="text" :blur="getlanglat" name='address' ms-duplex="@address" class="layui-input" id="">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <label class="layui-form-label">驾校经纬度：</label>
                        <div class="layui-input-block" style="position: relative;">
                            <input type="text" ms-duplex="@longlat" readonly placeholder="" autocomplete="off" class="layui-input" style=" margin-right: 10px; float: left;">
                            <input :click="getlanglat()" id="Button1" type="button" class="layui-btn add_btn" value="搜索" style="position: absolute; right: 0;"
                            />
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">驾校联系人：</label>
                        <div class="layui-input-block">
                            <input name='contacts' type="text" :duplex="coustname" class="layui-input" id="">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <label class="layui-form-label">联系人电话：</label>
                        <div class="layui-input-block" style="position: relative;">
                            <input maxlength="11" name='mobile' type="text" :duplex="cousttel" lay-verify="required|phone" placeholder="" autocomplete="off" class="layui-input"
                                style=" margin-right: 10px; float: left;">
                        </div>
                    </div>
                </div>
                <div class="layui-fluid layui-row">
                    <div class="layui-col-sm12">
                        <h5 class="lheight red">备注：驾校账号默认联系人电话号码，驾校账号密码默认随机生成，数字+字母的组合，6位字符。</h5>
                    </div>

                </div>
                <h5 class="lheight">驾校图片：</h5>
                <div class="" style="position: relative;">
                    <div class="layui-upload">

                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="demo2">
                                <div class="imglist" ms-for="($index, el) in @show_pics" style="width: 100px;height: 100px;position: relative;float: left;margin-right: 15px;margin-bottom: 15px">
                                    <i :click="removeimg($index)" class="layui-icon layui-icon-close-fill" style="font-size: 20px; color: red;position: absolute;right: -10px;top: -10px;z-index: 10;"></i>
                                    <img style="width: 100px;height: 100px;" ms-attr="{src:el} " alt="">
                                </div>
                                <div style="clear: both;">

                                </div>
                            </div>
                        </blockquote>
                        <button type="button" class="layui-btn add_btn" id="test2">
                            <i class="layui-icon-upload-drag layui-icon"></i>图片上传</button><span class="red" style="margin-left: 10px;">最多上传10张图片</span>
                    </div>
                </div>
                <!--模板-->
                <div class="layui-form-item layui-col-space10">
                    <div class="layui-input-block">
                        <button id="btnClose" class="layui-btn layui-btn-primary btn-left">关闭</button>
                        <button class="layui-btn btn-left add_btn" lay-submit lay-filter="component-form-element">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</body>

<script>
    var vm = avalon.define({
        $id: "test",
        provlist: [],
        regionlist: [],
        arealist: [],
        infolist: [],
        gathertlist: [],
        branchlist: [],
        provinceid: '',
        cityid: '',
        areaid: '',
        gatherId: '',
        selected_1: '1',
        selected_2: '1',
        selected_3: '1',
        selected_4:'',
        type: '2',
        address: '',
        longlat: '',
        longitude: '',
        latitude: '',
        pics: [],
        show_pics: [],
        CodeName: {
            code: "",
            name: ""
        },
        branch:'',
        branchname:'',
        branchid:'',
        parentid:'',
        coustname:'',
        cousttel:'',

        readonlys: false,
        // 获取省份
        getprovlist: function () {
            ax.post({
                url:schoolWebUrl +  '/api/captcha/getRegionProvince',
                contentType: "application/x-www-form-urlencoded",
                data: '',
                success: function (r) {
                    vm.provinceid = r.data[0].code;
                    vm.provlist = r.data;
                    vm.getRegionlist();
                },
            });
        },
        // 获取市
        getRegionlist: function () {
            ax.post({
                url: schoolWebUrl + '/api/captcha/getRegionCode',
                contentType: "application/x-www-form-urlencoded",
                data: { "code": vm.provinceid },
                success: function (r) {
                    vm.cityid = r.data[0].code;
                    vm.regionlist = r.data;
                    vm.getArealist();
                    vm.getinfolist();

                },
            });
        },
        // 获取区县
        getArealist: function () {
            // $('#areaId').empty();
            ax.post({
                url: schoolWebUrl + '/api/captcha/getRegionCode',
                contentType: "application/x-www-form-urlencoded",
                data: { "code": vm.cityid },
                success: function (r) {
                    vm.arealist = (r.data);
                    setTimeout(function () {
                        form.render('select');
                    },200)

                },
            });
        },
        //获取该市下面的车管所
        getinfolist: function () {
            ax.post({
                url: schoolWebUrl + '/api/division/info',
                contentType: "application/x-www-form-urlencoded",
                data: { "cityId": vm.cityid },
                success: function (r) {
                    vm.infolist = (r.data);
                    setTimeout(function () {
                        form.render('select');
                    },200)
                },
            });
        },
        // 根据当前用户获取总校信息
        getGather: function () {
            ax.get({
                url: schoolWebUrl + '/api/gather/getTotalGather',
                contentType: "application/x-www-form-urlencoded",
                data: {},
                success: function (r) {
                    vm.gathertlist = r.data;
                    vm.gatherId = r.data[0].id;
                    vm.getbranch();
                    setTimeout(function () {
                        form.render('select');
                    },300)
                },
            });
        },
        //获取总校下面所有分校
        getbranch: function () {
            ax.post({
                url: schoolWebUrl + '/api/gather/getBranch',
                contentType: "application/x-www-form-urlencoded",
                data: { gatherId: vm.gatherId },
                success: function (r) {
                    vm.branchlist = r.data;
                    setTimeout(function () {
                        form.render('select');
                    },300)
                },
            });
        },
        // 获取经纬度
        getlanglat: function () {
            var address = vm.address;
            $.ajax({
                type: 'get',
                url: ' https://restapi.amap.com/v3/geocode/geo?key=930ccb3f2c1982cbfbe33c328869ae40&address=' + address,
                success: function (r) {
                    if (r.status == 1) {
                        var langlat = r.geocodes[0].location.split(',');
                        vm.longlat = r.geocodes[0].location;
                        vm.longitude = langlat[0];
                        vm.latitude = langlat[1];

                    } else {
                        layer.alert("地址输入错误请重新输入");
                    }
                }
            });
        },
        removeimg: function (index) {
            vm.show_pics.removeAt(index)
            vm.pics.removeAt(index)
        },
        // 获取总校代码和名称
        getGatherCodeName: function () {
            ax.post({
                url: schoolWebUrl + '/api/gather/getGatherCodeName',
                contentType: "application/x-www-form-urlencoded",
                data: { gatherId: vm.gatherId},
                success: function (r) {
                    vm.CodeName = r.data;
                },
            });
        },
        
    })
    vm.$watch('onReady', function () {
        //获取省市区
        vm.getprovlist();
        vm.getGather();

    });
    vm.$watch('type', function () {
        if (vm.type > 2) {
            // vm.getGatherCodeName();
            vm.readonlys = true;
            if(vm.type==3){
                vm.branch=false;
            }else {
                vm.branch=true;
            }
        } else {
            vm.readonlys = false;

        }


    })

    var table;
    var form;
    layui.use(['table', 'form', 'laydate', 'layer', 'upload'], function () {
        table = layui.table;
        form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer,
            $ = layui.jquery,
            upload = layui.upload;

        form.on('submit(component-form-element)', function (data) {
            if(data.field.type>2){
                data.field.name = vm.branchname;
                data.field.code = "";
            }
            if(vm.parentid==''){
                data.field.parentId=vm.branchid;
            }else {
                if(vm.parentid!='' && vm.branchid!=''){
                    data.field.parentId=vm.branchid;
                }else {
                    data.field.parentId=vm.parentid;
                }

            }
            data.field.longitude = vm.longitude;
            data.field.latitude = vm.latitude;
            var pics = vm.pics
            data.field.pics = pics.join(',');
            var index = layer.load(0, {shade: false});
            ax.post({
                url: schoolWebUrl + "/api/gather/add",
                data: data.field,
                contentType: "application/x-www-form-urlencoded",
                success: function (data) {
                    layer.alert(data.message);
                    layer.close(index);
                    if (data.code == 0) {
                        //刷新父页面
                        setTimeout( function(){
                            topFrame.location.reload();
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        }, 2 * 1000 );//延迟2000毫米
                    }
                },
            });
            return false;
        })


        //改变
        form.on('radio(component-form-type)', function (data) {
            vm.type = data.value;
            vm.CodeName.code='';
            vm.CodeName.name='';
            vm.selected_4='';
            vm.branchname='',
            vm.branchid='',
            vm.parentid='',
            vm.address= '',
            vm.longlat= '',
            vm.longitude= '',
            vm.latitude= '',
            vm.coustname='',
            vm.cousttel='';
            form.render('select');

        });

        //省改变
        form.on('select(provinceSelect)', function (data) {
            vm.provinceid = data.value;
            vm.getRegionlist();
        });
        // 市改变
        form.on('select(regionSelect)', function (data) {
            vm.cityid = data.value;
            vm.getArealist();
            vm.getinfolist();
        });
        // 总校改变
        form.on('select(branchIdSelect)', function (data) {
            vm.gatherId = data.value;
            vm.parentid=data.value;
            vm.getGatherCodeName();
            vm.getbranch();
        });

        form.on('select(branchIdSelect1)', function (data) {
            vm.branchid = data.value;
        });



        //常规用法
        laydate.render({
            elem: '#activeTime'
            , range: true
        });

        //图片上传
        ax.upload({

            elem: '#test2',
            url: fileUploadUrl + "?appId=" + appId + "&userId=" + currentUserId + "&type=" + type,
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                /*obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });*/


            },
            done: function (res) {
                //上传成功
                if (vm.show_pics.length >= 10) {
                    alert('最多上传10张图片');
                    return;
                }
                vm.show_pics.push(fileShowUrl + '?id=' + res.data)
                vm.pics.push(res.data)
            }
        });

        $('#btnClose').on("click", function () {
            topFrame.location.reload();
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

    });


</script>

</html>